<template>
  <div class="serch-temp">
    <mt-search v-model="searchVal" cancel-text="取消" placeholder="搜索" @keyup.enter="serchclick"></mt-search>
    <mt-button size="normal" @click="serchclick">搜索</mt-button>
    <ul class="historySearch">
      <li v-for="(item,index) in historydata" :key="index">
        <mt-cell :title="item" :to="'/searchlist/'+item">
          <span style="color: green" @click.prevent.stop="deleteHistory(index)">x</span>
        </mt-cell>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchVal: "",
      historydata: []
    };
  },
  created() {
    this.historydata = this.getHistoryData();
  },
  methods: {
    serchclick() {
      if (this.searchVal.trim().length !== 0) {
        var historyDataArr = this.getHistoryData();
        historyDataArr.unshift(this.searchVal);
        localStorage.setItem("lt_history", JSON.stringify(historyDataArr));
        this.historydata = this.getHistoryData();
        this.$router.push({
          name: "Searchlist",
          params: { key: this.searchVal }
        });
      }
    },
    getHistoryData() {
      var histiryDataStr = localStorage.getItem("lt_history");
      return JSON.parse(histiryDataStr || "[]");
    },
    deleteHistory(index) {
      var lt_dataArr = this.getHistoryData();
      lt_dataArr.splice(index, 1);
      localStorage.setItem("lt_history", JSON.stringify(lt_dataArr));
      this.historydata = this.getHistoryData();
    }
  }
};
</script>
<style lang="scss" scoped>
.serch-temp {
  position: relative;
  .mint-search {
    height: auto;
  }
  .mint-button {
    position: absolute;
    top: 8px;
    right: 10px;
    background: #f39393;
    z-index: 990;
    height: 28px;
    font-size: 14px;
    border-radius: 0 4px 4px;
    color: #fff;
  }
}
</style>
